<script setup lang="ts">
import useBiliStore from "@/store/modules/useBiliStore";
import useUserStore from "@/store/modules/useUserStore";
import MThanksPlugin from "./MThanksPlugin.vue";

const emit = defineEmits<{
  (event: "login"): void;
}>();
const biliStore = useBiliStore(),
  userStore = useUserStore();
const showThank = ref(false),
  tPlugin = biliStore.thanksPlugin;

function noop() {}
function clickPlugin() {
  if (!userStore.hasLogin) return emit("login");
  showThank.value = true;
}
</script>

<template>
  <div
    class="flex flex-col w-50 h-30 p-4 border-2 border-solid border-gray-200 rounded-lg shadow-md shadow-gray-100"
    :class="[
      tPlugin.enabled ? 'shadow-red-100 border-red-200' : '',
      false ? 'bg-gray-200 cursor-not-allowed' : ''
    ]"
    @click="clickPlugin"
  >
    <div class="text-lg font-bold">答谢姬</div>
    <div class="flex-1">
      <n-ellipsis :line-clamp="2" :tooltip="{ placement: 'top' }">
        投喂指定礼物,自动答谢
      </n-ellipsis>
    </div>
    <div v-if="userStore.hasLogin" class="flex-ec">
      <n-switch v-model:value="tPlugin.enabled" @click.stop="noop">
        <template #checked> 开启 </template>
        <template #unchecked> 关闭 </template>
      </n-switch>
    </div>
  </div>
  <MThanksPlugin v-model:show="showThank" />
</template>

<style scoped lang="scss"></style>
